<template name="reminderMsg">
	<view class="msgRow" :class="item.flow" v-if="goodInfo && goodInfo.orderNo">
		<image class="userAvatar" :src="item.flow=='in'?toInfo.avatar:myInfo.avatar"></image>
	
		<view class="msgBox orderMsg">
			<text class="orderTishi">亲，您有一笔订单待支付</text>
			<view class="goodBox">
				<image :src="goodInfo.img"></image>
				<view class="goodInfo">
					<text class="goodTitle">{{goodInfo.name}}</text>
					<view class="paymentInfo">
						<text class="paymentTishi">{{txtArr[goodInfo.status]}}：</text>
						<text class="paymentCount">￥{{(goodInfo.status==1 ||goodInfo.status==2 || goodInfo.status==3)?goodInfo.payAmount:goodInfo.price}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="orderOp">
				<button>付款</button>
			</view> -->
			<view class="jiantou"></view>
		</view>
	</view>
	<view class="msgRow" :class="item.flow"  v-else-if="goodInfo.err" >
		<image class="userAvatar" :src="item.flow=='in'?toInfo.avatar:myInfo.avatar"></image>
		<view class="msgBox orderMsg">
			<view class="jiantou"></view>
			<view class="lodingBox">
				<text class="iconfont icon-guanbi2"></text>
				<text class="lodingText">该订单不存在</text>
			</view>
		</view>
	</view>
	<view class="msgRow" :class="item.flow"  v-else>
		<image class="userAvatar" :src="item.flow=='in'?userAvatar:customerAvatar"></image>
		<view class="msgBox orderMsg">
			<view class="jiantou"></view>
			<view class="lodingBox">
				<text class="iconfont icon-loading"></text>
				<text class="lodingText">订单消息加载中</text>
			</view>
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js"
	export default{	
		name:'reminderMsg',		//组件名称
		// 传递参数
		props:{
			item:{
				type:Object,
				default:null
			},
			myInfo:{
				type:Object,
				default:null
			},
			toInfo:{
				type:Object,
				default:null
			}
		},
		// 组件参数
		data(){
			return {
				goodInfo: {
					err:false
				},
				txtArr:['已支付','待支付预约金','待支付尾款','待支付全款','已支付','已支付','已支付','已支付','已支付','已支付'],
			}
		},
		// 组件方法
		methods:{
			getInfo(){
				API.getOrderDetailById(this.item.payload.description)
				.then(res=>{
					if(res.data.code==1 && res.data.data){
						this.goodInfo=res.data.data
					}else if(res.data.code==1 && res.data.data==null){
						this.goodInfo={err:true}
					}
					this.$root.msgScrollBottom()
				})
			}
		},
		created() {
			this.getInfo()
		}
		
	}
</script>

<style lang="less">
	.lodingBox{
		display: flex;
		align-items: center;
		.lodingText{
			font-size: 28upx;
			margin-left: 20upx;
		}
		.iconfont{
			font-size: 40upx;
			width: 40upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
		}
		.icon-guanbi2{
			color: #DD4A68;
		}
		.icon-loading{
			
			color: #ffcd11;
			
			animation-name: xuanzhuan;
			animation-duration: 1500ms;
			animation-timing-function: linear;
			animation-delay: 0s;
			animation-iteration-count: infinite;
		}
	}
	@keyframes xuanzhuan{
		from{
			transform:rotate(0deg);
		}
		to{
			transform:rotate(360deg);
		}
	}
	.msgRow {
		display: flex;
		align-items: flex-start;
		padding-right: 118upx;
		margin-bottom: 20upx;
	
		.userAvatar {
			width: 86upx;
			height: 86upx;
			border-radius: 50%;
			margin-right: 32upx;
			flex-shrink: 0;
		}
	
		.msgBox {
			background-color: #FFFFFF;
			border-radius: 10upx;
			position: relative;
			padding: 20upx 20upx;
			display: flex;
			align-items: center;
			min-height: 86upx;
	
			.jiantou {
				width: 20upx;
				height: 20upx;
				background-color: #FFFFFF;
				border-radius: 4upx;
				position: absolute;
				top: 43upx;
				left: -10upx;
				transform: translateY(-50%) rotate(45deg);
			}
	
			.msgCnt {
				font-size: 28upx;
				display: flex;
				align-items: center;
	
				.emoji {
					width: 36upx;
					height: 36upx;
				}
			}
		}
	
		.imgMsg {
			flex-grow: 0;
			overflow: hidden;
			padding: 0;
		}
	}
	.out {
		padding-left: 118upx;
		padding-right: 0;
		justify-content: flex-end;
	
		.userAvatar {
			order: 2;
			margin-right: 0;
			margin-left: 32upx;
		}
	
		.msgBox {
			order: 1;
	
			.jiantou {
				right: -10upx;
				left: auto;
			}
		}
	}
	.orderMsg {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		align-items: flex-start !important;
	
		.orderTishi {
			font-size: 24rpx;
			color: #8e8e8e;
			margin-bottom: 20upx;
		}
	
		.goodBox {
			display: flex;
			background-color: #f6f6f6;
			border-radius: 10upx;
			width: 100%;
			image {
				width: 146upx;
				height: 146upx;
				border-radius: 10upx;
				flex-shrink: 0;
				margin-right: 18upx;
			}
	
			.goodInfo {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 5upx 5upx 5upx 0;
	
				.goodTitle {
					font-size: 32rpx;
					color: #222433;
				}
	
				.paymentInfo {
					display: flex;
					align-items: center;
					.paymentTishi {
						font-size: 24upx;
					}
	
					.paymentCount {
						font-size: 30rpx;
						color: #ed2e2e;
					}
				}
			}
		}
	
		.orderOp {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-top: 18upx;
	
			button {
				margin: 0;
				height: 62upx;
				border-radius: 31upx;
				border: none;
				background: linear-gradient(to right, #ff6829, #ff2f36);
				color: #FFFFFF;
				padding: 0 50upx;
				line-height: 62upx;
				font-size: 28upx;
				font-weight: bold;
			}
	
			button:after {
				border: none;
			}
		}
	}
	
</style>
